import Cookie from 'js-cookie'
// 因为Header与Aside是兄弟组件
export default {
    state: {
        // 控制下拉菜单是否折叠
        isCollapse: false,
        // 面包屑数据
        tabsList: [
            {
                path: '/',
                name: 'home',
                label: '首页',
                icon: 's-home',
                url: 'Home/Home'
            }
        ],
        menu: [],
    },
    mutations: {
        // 修改isCollapse值的方法
        collapseMenu(state) {
            state.isCollapse = !state.isCollapse;
        },
        // 更新面包屑数据 - tabsList
        updateTabList(state, val) {
            if(state.name !== 'home') {
                // 查找索引值是否存在,如果存在返回当前索引,不存在返回-1
                const index = state.tabsList.findIndex( item => item.name === val.name );
                // 如果不存在则添加进tabsList
                if(index === -1) {
                    state.tabsList.push(val);
                }
            }
            // 查看是否添加成功
            // console.log(state.tabsList);
        },
        // 删除点击标签x时的数据 
        deleteTabData(state, val) {
            // console.log(val);
            const index = state.tabsList.findIndex( item => item.name === val.name );
            // 表示删除当前索引
            state.tabsList.splice(index, 1);
        },
        // 设置aside左侧菜单的数据
        setMenu(state, val) {
            state.menu = val;
            // 将传入的menu数据(即,val)存入cookie的缓存中, 否则刷新页面store实例也会被刷新,menu数据就会被清空了
            // JSON.stringify() - 将一个对象渲染成字符串
            Cookie.set('menu', JSON.stringify(val));
        },
        // 动态注册路由
        addMenuOrRouter(state, router) {
            // 判断当前缓存中是否有数据 - 如果没有,就不做处理
            if (!Cookie.get('menu')) return;
            // 如果Cookie.get('menu')中有数据,则组装动态路由的数据
            const menu = JSON.parse(Cookie.get('menu'));
            state.menu = menu;
            const menuArray = [];
            // 遍历menu数组
            menu.forEach(menuItem => {
                // 判断是否有子孩子 - 如果有子孩子,还需要对子孩子部分进行遍历
                if (menuItem.children) {
                    // map方法,返回一个新的数组
                    menuItem.children = menuItem.children.map(childrenItem => {
                        // 给当前的children属性添加component
                        childrenItem.component = () => import(`../views/${childrenItem.url}`);
                        return childrenItem;
                    });
                    // 扩展运算符 - 将添加了component属性的子孩子数组中的每个元素提取出来添加进数组中
                    // 因为嵌套路由中只有主路由和一个子路由
                    menuArray.push(...menuItem.children);
                } else {
                    menuItem.component = () => import(`../views/${menuItem.url}`);
                    menuArray.push(menuItem);
                }
            });
            // 检查数据是否正确
            console.log(menuArray, 'menuArray');
            // 路由的动态添加 router.addRoute()方法
            menuArray.forEach(item => {
                router.addRoute('main',item);
            })
        }
    },
}